<template>
	<div class="yz">
		<view class="listitem">
			<view>护眼模式</view>
			<switch @change="Eyeshield" :class="eyeshield ? 'checked' : ''" :checked="eyeshield ? true : false"></switch>
		</view>
		<view class="listitem borTop">
			<view>夜间模式</view>
			<switch @change="Night" :class="night ? 'checked' : ''" :checked="night ? true : false"></switch>
		</view>
	</div>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			eyeshield: false,
			night: false
		};
	},
	created() {
		this.night = this.CurrentTheme.name==="DarkMode"?true:false
	},
	methods: {
		// 护眼模式
		Eyeshield(e) {
			this.eyeshield = e.detail.value;
		},
		// 夜间模式
		Night(e) {
			this.night = e.detail.value;
			uni.setTabBarStyle({
			  color: this.night?"#ffffff":"#000000",
			  selectedColor: '#c3f5fa',
			  backgroundColor: this.night?"#000000":"#ffffff",
			  borderStyle: this.night?'black':"white"
			})
			this.$store.commit('Set_CurrentMode',{
				name:this.night?"DarkMode":"LightMode",
				color:this.night?"#ffffff":"#000000",
				backgroundColor:this.night?"#000000":"#ffffff",
				navColor:this.night?"#000000":"#87ceeb"
			})
			
			// #ifdef APP-PLUS
			//设置导航栏前景色
			this.night?plus.navigator.setStatusBarStyle("light"):plus.navigator.setStatusBarStyle("dark")
			// #endif
		}
	}
};
</script>

<style lang="less" scoped="scoped">
.yz {
	margin: 20px auto;
	width: 94%;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 10px 0 #e1e1e1;
	.listitem {
		padding: 20rpx 40rpx;
	}
}
.borTop {
	border-top: 1px solid #e6e6e6;
}
</style>
